<template>
	<div class="foue" v-show="showfs">
		<!-- 筛选跳转 -->
		<div class="fouesx">
			<p>价格区间</p>
			<input type="text" placeholder="最低价">--<input type="text" placeholder="最高价">
			<div class="zfouesx">
				<p>重置</p>
				<p @click="shows()" class="zxfouesx">确定</p>
			</div>
		</div>
		<div class="leftsx">
			
		</div>
	</div>
</template>
<style type="text/css" scoped>
	.leftsx{
		position: absolute;
		top: 0;
		right: 90%;
		left: 0%;
		bottom: 0;
		background: #000;
		opacity: .3;
		
	}
	.fouesx{
		position: absolute;
		top: 0;
		right: 0;
		left: 10%;
		bottom: 0;
		background: #fff;
	}
	.fouesx>p{
		margin-left: .3rem;
		margin-top: .23545rem;
		font-size: .3343rem;
	}
	.fouesx>input:nth-of-type(1){
		margin-left: .6rem;
	}
	.fouesx>input{
		font-size:.3rem;
		margin-top: .5435rem;
		height: .78565rem;
		border-radius: .1rem;
		outline: none;
	}
	.zfouesx{
		display: flex;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		font-size: .564834rem;
		color: #333;
		background: #fff;
		text-align: center;
	}
	.zfouesx>p{
		height: 1.23343rem;
		line-height: 1.23343rem;
		width: 50%;
	}
	.zxfouesx{
		background: #ff7900;
	}
</style>
<script type="text/javascript">
	export default{
		data(){
			return {
			}
		},
		methods:{
			shows(){
				this.$store.commit('changec')
			}
		},
		computed:{
			showfs(){
				return this.$store.state.fonr
			}
		}
	}
</script>